// media queries
$media-query-min: 19rem;
$media-query-med-1: 27rem;
$media-query-med-2: 35rem;
$media-query-max: 50rem;
$media-query-max-extra: 80rem;

/*************************************************************************
                          VERTICAL-RHYTHM
/*************************************************************************/

/* Use only multiples of these values for setting puddings and margins. This
 * will keep vertical rhythm between elements. */

$l-h-baseline: $l-h-default * 0.5;
$l-h-baseline-double: $l-h-default;
$l-h-baseline-half: $l-h-default * 0.25;



/*************************************************************************
                             DISPLAY
/*************************************************************************/

//---------------------------INLINE-BLOCK

.tags,
.tags li {
  display: inline-block;
}

//---------------------------BLOCK
img,
#footer-quote p:before,
.contact-form input
{
  display: block;
}

//---------------------------NONE

.sep {
  display: none;

}

/*************************************************************************
                                WIDTH-HEIGHT
/*************************************************************************/

#footer-quote p:before {
  width: $l-h-baseline-half * 5;
  height: $l-h-baseline-half * 5;
}

/*************************************************************************
                                HEIGHT
/*************************************************************************/

.fancy-nav:before,
.fancy-nav:after {
  height: 2px;
}

/*************************************************************************
                                WIDTH
/*************************************************************************/

//----------------------------MAX-WIDTH

article,
#footer-quote {
  max-width: $media-query-med-2;
}

.paginator ul,
#main-nav {
  max-width: $media-query-min * 0.5;
}

//----------------------------MIN-WIDTH

#wrapper {
  min-width: $media-query-min;
}


//----------------------------WIDTH=100%
main img,
.fancy-nav:before,
.fancy-nav:after,
.contact-form textarea {
  width: 100%;
}

.contact-form input[type="submit"] {
  width: $l-h-baseline-double * 4;
}

/*************************************************************************
                                POSITION
/*************************************************************************/

//----------------------------RELATIVE

#main-nav li,
.paginator li {
  position: relative;
}

//----------------------------ABSOLUTE

.fancy-nav:before,
.fancy-nav:after {
  position: absolute;
}

/*************************************************************************
                                LEFT
/*************************************************************************/

//----------------------------LEFT=0
.fancy-nav:before,
.fancy-nav:after {
  left: 0;
}

/*************************************************************************
                                RIGHT
/*************************************************************************/


/*************************************************************************
                                TOP
/*************************************************************************/

//----------------------------TOP=0
.fancy-nav:before {
  top: 0;
}

/*************************************************************************
                                BOTTOM
/*************************************************************************/

//----------------------------BOTTOM=0
.fancy-nav:after {
  bottom: 0;
}


